<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery的瀑布流</title>
    <link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main">
    <div class="box">
        <div class="pic">
            <img src="img/0.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/0.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/640.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/136873613.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122506.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/136873613.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/S70118-122543.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img/800.jpg"/>
        </div>
    </div>
</div>
<script src="jquery.js"></script>
<script>
$(window).on('load',function(){
    waterfall();
    var dataInt={"data":[{"src":'img/800.jpg'},{"src":'img/800.jpg'},{"src":'img/800.jpg'},{"src":'img/800.jpg'},{"src":'img/800.jpg'}]};
    $(window).on('scroll',function(){
        if(checkScrollSlide){
            $.each(dataInt.data,function(key,value){
                var oBox=$("div").addClass("box").appendTo($(".main"));
                var oPic=$("div").addClass("pic").appendTo(oBox);
                $("img").attr("src",'img/'+$(value).attr("src")).appendTo($(oPic));
            });
            waterfall();
        }
    })
});
function waterfall(){
    var $boxs=$(".main>div");
    //outerWidth：包括padding，border
    var w=$boxs.eq(0).outerWidth();
    var cols=Math.floor($(window).width()/w);
    $(".main").width(w*cols).css("margin","0 auto");
    var hArr=[];
    $boxs.each(function(index,value){
        var h=$boxs.eq(index).outerHeight();
        if(index<cols){
            hArr.push(h);
        }else{
            var minH=Math.min.apply(null,hArr);
            //判断索引
            var minIndex=$.inArray(minH,hArr);
            //设置之后图片位置
            $(value).css({
                'position':'absolute',
                'top':minH+'px',
                'left':minIndex*w+'px'
            });
            hArr[minIndex]+=$boxs.eq(index).outerHeight();
        }
    })
}
function checkScrollSlide(){
    var $lastBox=$(".main>div").last();
    var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop=$(window).scrollTop();
    var documentH=$(window).height();
    return (lastBoxDis<scrollTop+documentH)?true:false;
}
</script>
</body>
</html>